import navTpl from "./tpl/nav.tpl";
import navItemTpl from "./tpl/nav_item.tpl";
import { NavMenu } from "./nav_menu";
import { tplReplace } from "@/utils/tools";
import "./index.less";

export class Nav {
  constructor() {
    this.name = "headerNav";
    this.navMenu = new NavMenu();

    // 缓存html
    this.htmlCache = {};
  }

  tpl(data) {
    let list = "";
    data.forEach((item) => {
      list += tplReplace(navItemTpl(), {
        field: item.field,
        seriesName: item.series_name,
      });
    });

    return tplReplace(navTpl(), {
      navItems: list,
      navMenu: this.navMenu.tpl(),
    });
  }

  navMouseIn(e) {
    const data = e.data,
      phoneDatas = data.phoneDatas,
      oNav = data.oNav;

    const field = $(this).attr("data-field"),
      $navMenu = $(".J_navMenu");

    if (!oNav.htmlCache[field]) {
      oNav.htmlCache[field] = oNav.navMenu.appendMenuCards(
        phoneDatas.filter((item) => item.field === field)
      );
    }

    $navMenu.html(oNav.htmlCache[field]);
  }
}
